<script setup>
import {useRouter} from 'vue-router'
import {reactive, onMounted} from 'vue'
import {Login, GetAdminInfo} from '../../../apis/system/user';
import useUserStore from '../../../stores/system/user';
import LteCheckbox from "../../../layout/components/LteCheckbox.vue";

defineProps({
    title: {
        type: String,
        default() {
            return import.meta.env.VITE_GLOB_APP_TITLE;
        }
    },
});

const router = useRouter();
const store = useUserStore();

const form = reactive({
    username: '',
    password: '',
    remember: false,
});
const errors = reactive({
    username: '',
    password: '',
    remember: false,
});

const submit = () => {
    //记住用户
    if(form.remember){
        saveRemember();
    } else {
        clearRemember();
    }

    //执行登录
    Login(form).then((resLogin) => {
        store.setToken(resLogin.data.result.token);
        GetAdminInfo({}).then((resInfo) => {
            store.login(resInfo.data.result);
            router.push("/");
        }).catch((res) => {
            errors.username = "登录失败:" + res.data.message;
        });
    }).catch((res) => {
        errors.username = "登录失败:" + res.data.message;
    });
};

const saveRemember = () => {
    //保存记录
    localStorage.setItem("_login_remember", JSON.stringify({
        username: form.username,
        password: form.password,
        remember: form.remember,
        channel_id: form.channel_id,
    }));
};

const loadRemember = () => {
    //获取记录
    let str = localStorage.getItem("_login_remember");
    let data = JSON.parse(str);
    form.username = data?.username || "";
    form.password = data?.password || "";
    form.remember = data?.remember || false;
    form.channel_id = data?.channel_id || 0;
};

const clearRemember = () => {
    //清除记录
    localStorage.setItem("_login_remember", "{}");
};

onMounted(() => {
    //加载记录
    loadRemember();
});
</script>

<template>
    <div class="hold-transition login-page">
        <div class="login-box">
            <!-- title -->
            <div class="login-logo">
                <a><b>{{title}}</b></a>
            </div>
            <!-- form -->
            <div class="card">
                <div class="card-body login-card-body">
                    <p class="login-box-msg">Sign in to start your session</p>
                    <form method="post" @submit.prevent="submit">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Username" v-model="form.username" :class="{'is-invalid' : errors.username}" required>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fa fa-user"></span>
                                </div>
                            </div>
                            <div class="invalid-feedback" v-if="errors.username">
                                {{ errors.username }}
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="password" class="form-control" placeholder="Password" v-model="form.password" :class="{'is-invalid' : errors.password}" autocomplete="new-password" required>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                            <div class="invalid-feedback" v-if="errors.password">
                                {{ errors.password }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8">
                                <lte-checkbox v-model="form.remember">Remember Me</lte-checkbox>
                            </div>
                            <div class="col-4">
                                <button class="btn btn-primary btn-block" type="submit">Sign In</button>
                            </div>
                        </div>
                    </form>

                    <p class="mt-3 mb-1">
                        <!--<a href="#">I forgot my password</a>-->
                    </p>
                    <p class="mb-0">
                        <!--<a href="#">Register a new membership</a>-->
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
